<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>样品订单详情</span>
      </div>
      <el-form
        ref="orderForm"
        :model="orderForm"
        :rules="formRule"
        label-position="right"
        label-width="120px"
        style="width:100%;flex-wrap:wrap"
        class="flex"
      >
        <el-form-item label="申请编号" prop="recordNum" style="width:30%">
          <el-input v-model="orderForm.recordNum" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="来源类别" prop="from" style="width:30%">
          <el-input v-model="orderForm.from" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="申请时间" prop="createTime" style="width:30%">
          <el-input v-model="orderForm.createTime" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="申请账户" prop="pm" style="width:30%">
          <el-input v-model="orderForm.pm" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="申请联系电话" prop="mobile" style="width:30%">
          <el-input v-model="orderForm.mobile" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" prop="company" style="width:30%">
          <el-input v-model="orderForm.company" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" style="width:30%">
          <el-input v-model="orderForm.status" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="申请理由" prop="remark" style="width:30%">
          <el-input v-model="orderForm.remark" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="companyAddress" style="width:30%">
          <el-input v-model="orderForm.companyAddress" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="终端客户" prop="company" style="width:30%">
          <el-input v-model="orderForm.company" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="项目产品" prop="useProduct" style="width:30%">
          <el-input v-model="orderForm.useProduct" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="量产时间" prop="createTime" style="width:30%">
          <el-input v-model="orderForm.createTime" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="单机用量" prop="useCount" style="width:30%">
          <el-input v-model="orderForm.useCount" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="预估数量" prop="useTotal" style="width:30%">
          <el-input v-model="orderForm.useTotal" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="useProject" style="width:30%">
          <el-input v-model="orderForm.useProject" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="PM姓名" prop="pm" style="width:30%;">
          <el-input v-model="orderForm.pm" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="PM电话" prop="pmMobile" style="width:30%;">
          <el-input v-model="orderForm.pmMobile" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <!-- <el-form-item label="联系邮箱" prop="mobile" style="width:30%;">
          <el-input v-model="orderForm.mobile" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item> -->

        <el-form-item label="联系人电话" prop="mobile" style="width:30%;">
          <el-input v-model="orderForm.mobile" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="申请数量" prop="useCount" style="width:30%;">
          <el-input v-model="orderForm.useCount" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%" height="400" stripe>
        <el-table-column prop="productNum" label="制造商料号" align="center"></el-table-column>
        <el-table-column prop="count" label="申请数量" align="center"></el-table-column>
        <el-table-column prop="manufacturer" label="供应商" align="center"></el-table-column>
        <el-table-column prop="manufacturer" label="物流号" align="center"></el-table-column>
        <el-table-column prop="status" label="样品状态" :formatter="formatStatus" align="center"></el-table-column>
        <el-table-column prop="manufacturer" label="审批答复" align="center"></el-table-column>
        <el-table-column label="操作" fixed="right" width="150"
                         align="center">
          <template slot-scope="scope" >
              <el-button type="text"
                         @click="send(scope.row)">确认发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align:center;margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 导出 -->
    <el-dialog title="确认发货" :visible.sync="dialogDetailFormVisible">
      <el-form :model="downLoadForm">
         <el-form-item label="物流号" prop="mobile" style="width:30%;">
          <el-input v-model="onum" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogDetailFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  SAMPLE_RECORDLISTBYMAINID
} from '@/utils/api';
import { formatDate } from '@/utils/validate.js';
import { Message } from 'element-ui'
export default {
  data() {
    return {
      dialogDetailFormVisible:false,
      onum:'',
      orderForm: {},
      formRule: {},
      tableData: [],
      isDisabled: false,
      currentPage: 1,
      pageSize: 5,
      total: 0
    };
  },
  mounted() {
    if (this.$route.query["data"]) {
      this.isDisabled = this.$route.query["handler"] == "check" ? true : false;
      this.orderForm = this.$route.query["data"];
  		this.orderForm.createTime = this.formatSecond(this.orderForm.createTime)
			if(this.orderForm.status == 0){
				this.orderForm.status = "审核中"
			}else if(this.orderForm.status == 1){
				this.orderForm.status = "已审核"
			}else if(this.orderForm.status == 2){
				this.orderForm.status = "已婉拒"
			}else if(this.orderForm.status == 3){
				this.orderForm.status = "待发货"
			}else if(this.orderForm.status == 4){
				this.orderForm.status = "待收货"
			}else if(this.orderForm.status == 5){
				this.orderForm.status = "待评价"
			}else {
				this.orderForm.status = "未知"
      }
      
      if(this.orderForm.from==0){
        //0aml 1 商城申请
        this.orderForm.from="AML"
      }else{
        this.orderForm.from="商城申请"
      }
      this.getOrderList()
    }
  },
  methods: {
    send(row){

    },
    downLoad(row){
      console.log('===>'+row)
    },
    formatFrom (row, column) {
      var status = row[column.property]
      switch (status) {
        case 0: return 'AML'
        case 1: return '商城申请'
      }
    },
    //时间格式化  
    formatSecond(row, column) {
//    var second = row[column.property];  
//    if (!second) return ""; 
      return formatDate(new Date(row*1000),"yyyy-MM-dd hh:mm:ss");  
    },
    // 订单状态格式化
    formatStatus(row, column) {
      var status = row[column.property]
      switch(status) {
        case 0: return '审核中'
        case 1: return '已审核'
        case 2: return '已婉拒'
        case 3: return '待发货'
        case 4: return '待收货'
        case 5: return '待评价'
        default: return '未知'
      }
    },
    getOrderList(){
      SAMPLE_RECORDLISTBYMAINID({ 
	      recordmainId:this.orderForm.id,
	      pageNo: this.currentPage,
	      pageSize: this.pageSize
      }).then(res => {
	      this.tableData = res.data.dataList
	      this.total = res.data.count
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
      this.getOrderList()
    }
  }
};
</script>

<style lang="scss" scoped>
</style>